<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'default',
	navigationBarTitleText: '通知详情',
	},
	}
</route>
<script lang="ts" setup>
	import { noticeDetailsApi, noticeIsReadApi } from '@/service/my/index'

	const noticeData : any = ref({
		"publishTime": "",
		"title": "",
		"content": ""
	})

	const parsedNodes : any = ref('');
	let noticeId = ''
	const isRead = ref<string>()
	const refreshIfNeeded = ref<boolean>(false)
	const formatNodes = (html) => {
		const result = html.replace(
			/<img([^>]*)>/g,
			'<img style="max-width: 100%; height: auto; display: block;" $1>'
		);
		return result
	};

	// 页面启动
	onLoad(async () => { })

	// 在组件挂载时获取课程详情
	onMounted(() => {
		getNoticeDetails()
	})

	const getNoticeDetails = async () => {
		try {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]

			noticeId = currentPage.$page?.options?.id
			isRead.value = currentPage.$page?.options?.isRead
			const res : any = await noticeDetailsApi(noticeId)
			if (res?.code === 200) {
				noticeData.value = res.data
				parsedNodes.value = formatNodes(res.data.content)
			} else {
				console.error('')
			}
		} catch (error) {
			uni.showToast({
				title: '获取课程详情失败',
				icon: 'none',
			})
		} finally {
			if (isRead.value !== '1') {
				getNoticeIsRead()
				refreshIfNeeded.value = true
			}
		}
	}

	// 公告已读
	const getNoticeIsRead = async () => {
		const params = { id: noticeId }
		const res = await noticeIsReadApi(params)
		if (res?.code === 200) {
			console.info('公告已读')
		} else {
			console.error('公告已读失败')
		}
	}

	onUnload(() => {
		uni.$emit('refreshIfNeeded', refreshIfNeeded)
	})
</script>

<template>
	<view class="main_container">
		<view class="content_container">
			<view class="item_container">
				<text class="title-font">公告名称</text>
				<view class="value-font">{{ noticeData.title }}</view>
			</view>

			<!-- <wd-divider color="#E6E6E6" :hairline="false"></wd-divider> -->

			<view class="item_divider"></view>

			<view class="item_container">
				<text class="title-font">送达时间</text>
				<view class="value-font">{{ noticeData.publishTime }}</view>
			</view>

			<view class="item_divider2"></view>

			<view class="item_container">
				<text class="title-font">通知详情</text>
			</view>

			<view>
				<!-- <wd-text size="24rpx" line-height="30rpx" color="#999999" :text="noticeData.content" /> -->
				<rich-text class="rich-text" :nodes="parsedNodes" preview
					style="size: 20rpx;color:#999999;line-height: 45rpx;"></rich-text>
			</view>
		</view>
	</view>
</template>

<style scoped>
	.main_container {
		display: flex;
		flex-direction: column;
	}

	.rich-text {
		width: 100%;
	}

	.rich-text img {
		max-width: 100%;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.rich-text p {
		font-size: 28rpx;
	}


	.content_container {
		min-height: 1000rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		margin: 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.item_container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.item_divider {
		height: 1rpx;
		background-color: rgb(243, 238, 238);
	}

	.item_divider2 {
		height: 1.5rpx;
		background-color: rgb(243, 238, 238);
	}

	.title-font {
		font-size: 28rpx;
		font-weight: bold;
	}

	.value-font {
		font-size: 24rpx;
		color: #999999;
	}
</style>